<template>
  <div id="worth">
    <van-nav-bar class="top" fixed placeholder title="值得买">
      <template #left>
        <van-icon
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <!-- 导航 -->
    <div class="nav">
      <div class="u_group" v-for="item in lists" :key="item.name">
        <div v-for="items in item" :key="items.name">
          <img :src="items.img" alt="" />
          <h5>{{ items.name }}</h5>
          <p>{{ items.del }}</p>
        </div>
      </div>
    </div>
    <!-- 瀑布流 -->
    <van-row class="collists" type="flex" justify="space-around">
      <van-col @click="goto('/goods/'+item.goods_id)" v-for="item in goodcategory" :key="item.goods_id" span="12">
        <img class="bigimg" :src="item.goods_small_logo" alt="" />
        <p>{{item.cat_three_id}}</p>
        <div class="goods">
          <div class="goodsname">
            <van-image
              round
              width="30px"
              height="30px"
              :src="item.goods_small_logo"
            />
            <span>{{item.goods_name}}</span>
          </div>
          <div class="goodsview">
            <van-icon name="eye-o" />
            <span>{{item.goods_number}}</span>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name: "Discover",
  data() {
    return {
      goodcategory: [],
      lists: [
        [
          {
            img: require("../assets/worth/w1.png"),
            name: "好物大赏",
            del: "购物先看榜",
          },
          {
            img: require("../assets/worth/w2.png"),
            name: "选购指南",
            del: "破解选择困难",
          },
        ],
        [
          {
            img: require("../assets/worth/w3.png"),
            name: "每月好物",
            del: "7月必买清单",
          },
          {
            img: require("../assets/worth/w4.png"),
            name: "晒单",
            del: "入选就有红包",
          },
        ],
        [
          {
            img: require("../assets/worth/w5.gif"),
            name: "超值专区",
            del: "新定价直降",
          },
          {
            img: require("../assets/worth/w6.png"),
            name: "新品体验馆",
            del: "开箱测评",
          },
        ],
        [
          {
            img: require("../assets/worth/w7.png"),
            name: "植系空间",
            del: "居家绿植指南",
          },
          {
            img: require("../assets/worth/w8.png"),
            name: "睡眠实验室",
            del: "专研科技床品",
          },
        ],
        [
          {
            img: require("../assets/worth/w9.gif"),
            name: "Pro会员",
            del: "每周专享福利",
          },
          {
            img: require("../assets/worth/w10.png"),
            name: "中国风物志",
            del: "记录中国",
          },
        ],
        [
          {
            img: require("../assets/worth/w11.png"),
            name: "明星商品",
            del: "百万粉丝之选",
          },
          {
            img: require("../assets/worth/w12.png"),
            name: "HOME",
            del: "实景家具专享",
          },
        ],
      ],
    };
  },
  async created() {
    const { data:{data} } = await this.$request.get("/api/goods/category");
     data.list.forEach(async item=>{
        const  {data}  = await this.$request.get("/api/goods",{
          params:{
            cat_one_id:item.cat_one_id
          }
        });
        this.goodcategory.push(data.data.list[0]);
     })
  },
  methods: {
    goto(url) {
      this.$router.push(url);
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#worth {
  background-color: #eee;
}
.nav {
  margin: 10px auto;
  width: 90%;
  height: 220px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  .u_group {
    width: 70px;
    height: 100%;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
    flex-shrink: 0;
    margin-right: 10px;
    div {
      width: 100%;
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 10px;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }
      p {
        font-size: 10px;
      }
    }
  }
}
.collists {
  padding: 10px 10px 60px 10px;
  box-sizing: border-box;
  .van-col {
    background-color: #fff;
    margin-bottom: 10px;
    width: 46%;
    border-radius: 10px;
    .bigimg {
      width: 100%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    P {
      margin-top: 5px;
      font-size: 13px;
      color: #333;
    }
    .goods {
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span{
        width: 70px;
        height: 15px;
        overflow: hidden;
      }
      .goodsname {
        width: 85px;
        justify-content: space-between;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
